<template>
  <view>
    <view class="password h5-padding">
      <view class="gui-border-b gui-flex gui-rows gui-nowrap gui-align-items-center">
        <image src="/static/password/code.png"></image>
        <u-input maxlength="6" v-model="code"  placeholder="请输入验证码" placeholder-style="{height: 28rpx;font-size: 31rpx;font-family: PingFang SC;color:#333;font-weight: 500;color: #8A8B8E;line-height: 75rpx;text-indent:24rpx;}" />
        <text class="sendmsg gui-block-text gui-border-l gui-text-right"
              :class="[opt.isSend?'is-pointer-events':'']"
              @click="onSendCode"
        >{{opt.codeText}}</text>
      </view>
      <view class="gui-border-b gui-flex gui-rows gui-nowrap gui-align-items-center">
        <image src="/static/password/password.png"></image>
        <u-input type="password" maxlength="20" v-model="userPwd"  placeholder="请输入6-20位密码" placeholder-style="{height: 28rpx;font-size: 31rpx;font-family: PingFang SC;color:#333;font-weight: 500;color: #8A8B8E;line-height: 75rpx;text-indent:24rpx;}" />
      </view>
      <view class="gui-border-b gui-flex gui-rows gui-nowrap gui-align-items-center">
        <image src="/static/password/password.png"></image>
        <u-input type="password" maxlength="20" v-model="userPwd1"  placeholder="请再输入6-20位密码" placeholder-style="{height: 28rpx;font-size: 31rpx;font-family: PingFang SC;color:#333;font-weight: 500;color: #8A8B8E;line-height: 75rpx;text-indent:24rpx;}" />
      </view>

      <u-button  hover-class="none" :custom-style="{
      marginTop:'695rpx',
      marginBottom:'342rpx',
      width: '678rpx',
  height: '80rpx',
  background: '#4FB5B6',
  borderRadius: '40rpx',

  fontSize: '36rpx',
  fontFamily: 'PingFang SC',
  fontWeight: 500,
  color: '#FFFFFF'
    }" @click="onSave">保存</u-button>
    </view>
    <Tabbar :current="3"></Tabbar>
  </view>
</template>
<script>
import sendCodeMixins from '@/mixins/sendCode-mixins'
import {updatePwd} from '@/api/login'
export default {
  mixins:[sendCodeMixins],
  data() {
    return {
      userPwd:'',//密码
      userPwd1:'',//再输入一次密码
    }
  },
  methods: {
    //发送验证码
    onSendCode(){
      const phone = this.$store.state.userInfo.userPhone
      this.onSendCodeDatas(phone)
    },
    //修改密码
    onSave(){
      if(!this.code.length){
        this.$showToast('请输入验证码')
        return false
      } if(!this.userPwd.length){
        this.$showToast('请输入密码')
        return false
      }if(!this.userPwd.length){
        this.$showToast('再输入一次密码')
        return false
      } if(this.userPwd!==this.userPwd1){
        this.$showToast('两次密码不相同')
        return false
      }
      this.$showLoading({title:'密码修改中...'})
      updatePwd({captcha:this.code,userPhone:this.$store.state.userInfo.userPhone,
        userPwd:this.userPwd
      }).then(res =>{
        const {code,message} = res
        this.$hideLoading()
        if(code===200){
          this.$showToast(message)
          setTimeout(()=>{
            this.$navigateBack()
          },1200)
        } else {
          this.$showToast(message)
        }
      }).catch(err =>{
        this.$hideLoading()
        this.$showToast(err.message)
      })
    }
  }
}
</script>
<style scoped lang="scss">
.password{
  padding:0 36rpx 0 25rpx;
  image{
    width: 30rpx;
    height: 30rpx;
    margin-right: 24rpx;
  }
  .gui-border-b{
    height: 96rpx;
    line-height: 96rpx;
  }
  u-input{
    width: 100%;
  }
  .sendmsg{
    white-space: nowrap;
  }
}

</style>
